<template>
  <!-- 员工管理页 -->
  <div>
    <!-- 头部区域 -->
    <div class="header">
      <!-- 添加按钮 -->
      <el-button type="primary" size="mini" @click="addUser">添加</el-button>
      <!-- 用户名输入框 -->
      <el-input placeholder="请输入用户名" v-model="userName" clearable style="width:180px" size="mini"></el-input>
      <!-- 用户状态下拉框 -->
      <el-select v-model="userStatus" clearable placeholder="请选择状态" size="mini">
        <el-option label="正常" value="正常"></el-option>
        <el-option label="禁用" value="禁用"></el-option>
      </el-select>
      <!-- 查询按钮 -->
      <el-button type="primary" size="mini" @click="queryUser">查询</el-button>
    </div>

    <!-- 表格内容区 -->
    <div class="table_content">
      <!-- :data整个表格的数据源 -->
      <el-table :data="userData" style="width: 100%" size="mini">
        <!-- 序号 -->
        <el-table-column prop="id" label="编号" align="center"></el-table-column>
        <!-- 产品编号 -->
        <el-table-column prop="username" label="用户名" align="center"></el-table-column>
        <!-- 名称 -->
        <el-table-column prop="realname" label="姓名" align="center"></el-table-column>
        <!-- 价格 -->
        <el-table-column prop="telephone" label="手机号" align="center"> </el-table-column>
        <!-- 状态 -->
        <el-table-column prop="gender" label="性别" align="center">
          <template slot-scope="scope">

            <div v-if="scope.row.gender=='male'" style="color:#3a71a8;">男</div>
            <div v-else style="color: #e65d6e;">女</div>
          </template>
        </el-table-column>
        <!-- 所属栏目 -->
        <el-table-column prop="status" label="状态" align="center">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.status=='正常'" size="mini">正常</el-tag>
            <el-tag type="danger" v-if="scope.row.status=='禁用'" size="mini">禁用</el-tag>
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" style="color:#30b08f" @click="editUser(scope.row)">编辑</el-button>
            <el-button type="text" size="small" style="color:#e65d6e" @click="deleteUser(scope.row.id)">删除</el-button>
            <el-button type="text" size="small" style="color:#3a71a8" @click="details(scope.row.id)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 底部分页区域 -->
    <div class="paginetion">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="[2,4,6,10]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="this.total">
      </el-pagination>
    </div>
    <!-- 模态框 -->
    <el-dialog :title="dialogTitle" :visible.sync="showDialog" width="50%" @close="dialogClose">
      <span>
        <el-form :model="form" ref="form" :rules="rules" label-width="80px" :inline="false" size="normal">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="form.username"></el-input>
          </el-form-item>
          <el-form-item label="姓名" prop="realname">
            <el-input v-model="form.realname"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="telephone">
            <el-input v-model="form.telephone"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="form.password"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="gender">
            <el-radio v-model="form.gender" label="male">男</el-radio>
            <el-radio v-model="form.gender" label="female">女</el-radio>
          </el-form-item>
          <el-form-item label="状态" prop="status" v-if="dialogTitle=='编辑产品'">
            <el-radio v-model="form.status" label="禁用">禁用</el-radio>
            <el-radio v-model="form.status" label="正常">正常</el-radio>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer">
        <el-button @click="dialogClose">取消</el-button>
        <!-- 提交表单后 调用重置表单 -->
        <el-button type="primary" @click="submitForm">确定</el-button>
      </span>
    </el-dialog>
  </div>


</template>

<script>
  // 引入axios
  import {
    get,
    post
  } from '@/utils/request'
  export default {
    data() {
      return {
        // 输入框 用户名
        userName: '',
        // 下拉框 用户状态
        userStatus: '',
        // 表单规则
        rules: {
          username: [{
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          }],
          realname: [{
            required: true,
            message: '请输入姓名',
            trigger: 'blur'
          }],
          telephone: [{
            required: true,
            message: '请输入手机号',
            trigger: 'blur'
          }],
          password: [{
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }]
        },
        // 模态框标题
        dialogTitle: '',
        // 模态框的显示与隐藏
        showDialog: false,
        // 用户状态
        status: '正常',
        // 用户性别
        gender: '',
        // 表单数据
        form: {},
        total: 0,
        // 用户表格数据源
        userData: [],
        // 用户名称
        userName: '',
        // 用户状态
        userStatus: '',
        // 当前的页码
        currentPage: 1,
        pageSize: 10,
        // 用户查询的参数对象
        queryData: {},

      };
    },
    computed: {},
    methods: {
      // 获取详情
      details(id) {
        this.$router.push({
          path: 'Details',
          query: {
            id
          }
        })
      },
      // 删除用户信息
      deleteUser(id) {
        this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          let res = await get('/baseUser/deleteById', {
            id
          })

          if (res.status == 200) {
            this.$message({
              message: res.message,
              type: 'success'
            });
          }
          // 删除后更新表格
          this.getUserData();
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });


      },
      // 编辑用户信息
      editUser(row) {
        this.form = {
          ...row
        }
        this.showDialog = true
        this.dialogTitle = '编辑用户'
        this.gender = this.form.gender
        this.status = this.form.status

      },
      // 表单提交
      submitForm() {
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            // 添加用户接口有问题
            if (this.dialogTitle == '添加用户') {
              //发送表单验证请求，提交表单对象，给用户成功提示，刷新页面，调用关闭模态框的方法
              let res = await post('/baseUser/addUserWidthRole', this.form)
              console.log(res)
              if (res.status == 200) {
                this.$message({
                  message: res.message,
                  type: 'success'
                });
              }
            } else {
              // 编辑
              //发送表单验证请求，提交表单对象，给用户成功提示，刷新页面，调用关闭模态框的方法
              let res = await post('/baseUser/saveOrUpdate', this.form)
              console.log(res)
              if (res.status == 200) {
                this.$message({
                  message: res.message,
                  type: 'success'
                });
              }
            }
            this.getUserData()
            this.dialogClose()
          }
        });
      },
      //关闭模态框，调用表单重置
      dialogClose() {
        this.$refs['form'].resetFields()
        setTimeout(() => {
          this.showDialog = false
        }, 200)
      },
      // 分页查询用户信息
      async getUserData() {
        let data = {
          page: this.currentPage,
          pageSize: this.pageSize
        }
        data = {
          ...data,
          ...this.queryData
        }
        let res = await get('/baseUser/pageQuery', data)
        // 表格数据源
        this.userData = res.data.list
        // 总条数
        this.total = res.data.total
      },
      // 添加用户
      addUser() {
        this.form = {}
        // 显示模态框
        this.showDialog = true
        // 标题
        this.dialogTitle = '添加用户'
      },
      //根据条件模糊查询用户的信息
      queryUser() {
        let data = {
          username: this.userName,
          status: this.userStatus,
        }
        //格式化参数，当某个属性没有值得时候，以防影响网络请求的结果
        for (let i in data) {
          if (!data[i]) {
            delete data[i]
          }
        }
        //将参数 赋值给 queryData
        this.queryData = data
        //强制回到第一页
        this.currentPage = 1
        //调用获取数据的函数
        this.getUserData()
      },
      // 控制每页条数 每页要展示数据条数
      handleSizeChange(val) {
        this.pageSize = val;
        // 将当前的页数重置到第一页
        this.currentPage = 1;
        this.getUserData();
      },
      // 控制当前显示的页数
      handleCurrentChange(val) {
        // 将当前页数与分页插件动态点击控制的页数组相绑定
        this.currentPage = val;
        // 重新调用获取所以UC韩品数据的方法
        this.getUserData();
      }
    },
    created() {
      // 分页查询用户信息
      this.getUserData()
    },
    mounted() {},
  };

</script>
<style scoped>
  .table_content {
    margin-top: 20px;
  }

  .paginetion {
    margin-top: 20px;
    float: right;
  }

</style>
